<template>
  <div class="page-container">
    <div class="container m3d">
      <img class="ellipse" src="./img/ellipse.png" alt="">
      <div class="ball_center">
        <img class="boy" src="./img/boy.png" alt="">
        <img class="boy_shadow" src="./img/shadow.png" alt="">
      </div>
      <div class="bottom m3d">
        <div class="base ball_1 m3d">
          <div class="ball"></div>
        </div>
        <div class="base ball_2 m3d">
          <div class="ball"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AniDemo1',
  props: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.page-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #352955, #6f7dbf);
  display: flex;
  align-items: center;

  .m3d {
    transform-style: preserve-3d;
  }

  .container {
    margin: 0 auto;
    width: 508px;
    height: 508px;
    position: relative;


    .ellipse {
      top: 186px;
      right: 8px;
      z-index: 999;
      width: 492px;
      height: 134px;
      position: absolute;
      transform: rotate(-7deg) rotateX(30deg);
    }

    .base {
      top: 264px;
      left: -14px;
      position: absolute;
      transform-origin: 264px 0;
    }

    .ball {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f7f7f7;
      box-shadow: 0 0 20px #f7f7f7;
      will-change: transform;
      animation: cir2-data 10s linear infinite;
    }
  }

  .ball_center {
    top: 90px;
    left: 100px;
    width: 300px;
    height: 300px;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(40.09deg, #241c61 15.98%, #c4aeff 86.17%);

    .boy {
      top: -30px;
      left: 50%;
      width: 30px;
      position: absolute;
      display: inline-block;
      transform: translateX(-50%);
    }

    .boy_shadow {
      top: 17px;
      left: 50%;
      width: 72px;
      height: 72px;
      position: absolute;
      display: inline-block;
      transform: translateX(-67px);
    }
  }

  .bottom {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    will-change: transform;
    animation: cir-data 10s linear infinite;
    border: 4px solid hsla(0, 0%, 100%, 0);
    transform: rotateX(80deg) rotateY(-15deg) rotate(0);

    .ball_1 {
      transform: rotateX(-90deg) rotateY(0deg) translateY(-14px);
    }

    .ball_2 {
      transform: rotateX(-90deg) rotateY(180deg) translateY(-14px);
    }
  }

  @keyframes cir-data {
    0% {
      transform: rotateX(80deg) rotateY(-15deg) rotate(0deg) translateZ(0);
    }
    50% {
      transform: rotateX(80deg) rotateY(-15deg) rotate(-180deg) translateZ(0);
    }
    100% {
      transform: rotateX(80deg) rotateY(-15deg) rotate(-1turn) translateZ(0);
    }
  }

  @keyframes cir2-data {
    0% {
      transform: rotateY(-180deg);
    }
    100% {
      transform: rotateY(-540deg);
    }
  }
}
</style>
